<template>
  <view>
    <!-- 轮播图区 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in bannerList" :key="index">
        <image :src="item.image" alt=""></image>
      </swiper-item>
    </swiper>
    
    <view class="notice" @click="goNotice">
      <view class="noticeIcon iconfont icon-yangshengqi">
        <text style="margin-left: 16rpx;">关注公众号，.......</text>
      </view>
    </view>
    <!-- 菜单区 -->
    <view class="menu">
      <view class="items" v-for="(item,index) in menumsg" :key="index" @click="goNext(item.url)">
        <view class="menu-item">
          <view class="menu-icon">
            <view :class="['iconfont', item.icon]"></view>
          </view>
          <text>{{item.title}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getSwiper } from '../../request/api.js'
  export default {
    data() {
      return {
        title: 'Hello',
        bannerList: {},
        menumsg: [{
            title: '快递代取',
            icon: 'icon-songhuoshangmen',
            url: '/pages/daiQu/daiQu'
          },
          {
            title: '校园跑腿',
            icon: 'icon-mbile-full',
            url: '/pages/run/run'
          },
          {
            title: '快递代寄',
            icon: 'icon-huoche_o',
            url: '/pages/send/send'
          },
          {
            title: '租借服务',
            icon: 'icon-ziyuan7',
            url: '/pages/rend/rend'
          },
          {
            title: '游戏陪玩',
            icon: 'icon-wangyou',
            url: '/pages/game/game'
          },
          {
            title: '帮我送',
            icon: 'icon-79-love',
            url: '/pages/help/help'
          },
        ]
      }
    },
    onShow() {
      this.getSwiperInfo()
    },
    methods: {
      // 获取轮播图数据
      getSwiperInfo(){
        getSwiper().then((res) => {
          // console.log(res)
          this.bannerList = res.bannerList
        }).catch((err) => {
          console.log(err)
        })
      },
      // 页面跳转
      goNext(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 去公告
      goNotice(){
        uni.navigateTo({
          url: '/pages/notice/notice'
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #eee;
  }

  .swiper {
    width: 100%;
    height: 200px;
  }

  .swiper image {
    width: 100%;
  }

/* 公告 */
  .notice {
    width: 100%;
    height: 60rpx;
    display: flex;
    padding: 0 20rpx;
    box-sizing: border-box;
    align-items: center;
    font-size: 28rpx;
    background: #fff;
    margin: 40rpx 0;
  }

  .notice .noticeIcon {
    margin-right: 20rpx;
  }
/* 菜单区 */
  .menu {
    width: 100%;
    height: 550rpx;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .items {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-item {
    width: 155rpx;
    height: 130rpx;
    background: #fff;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    border-radius: 10rpx;
  }

  .menu-icon {
    width: 125rpx;
    height: 125rpx;
    margin-top: -50rpx;
    border-radius: 50%;
    background: #6a98ca;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  }

  .menu-icon .iconfont {
    font-size: 64rpx;
    color: #fff;
  }

  .menu-item text {
    font-size: 24rpx;
  }
</style>